import React from 'react'
import { BrowserRouter as Router, Redirect, Route, NavLink, Switch } from 'react-router-dom';
import './my.css'
import { ActivityIndicator } from 'antd-mobile'
class Mymywen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
			userid: localStorage.getItem("userid"),
			res: [],
			isShow: true
			//显示this.state.res.map is not a function就是因为
			//应该是[]不是{}
  	    };
    }
	//查所有文章
	componentDidMount() {
		fetch('http://154.8.202.56:8081/articlelist/idcha', {
			method: 'post',
			body: JSON.stringify({'userid':`${this.state.userid}`}),
			headers: {
			    "Access-Control-Allow-Origin":"*",
			    'content-type': 'application/json'
			},
			mode: 'cors'
		})
		.then(res=>res.json())
		.then(res=> {
			//console.log(res)
			this.setState({
				res: res,
				isShow: false
			});
		})
	}
    render () {
		const han = (id) => {
			fetch('http://154.8.202.56:8081/articlelist/shan', {
				method: 'post',
				body: JSON.stringify({'articleid':id}),
				headers: {
				    "Access-Control-Allow-Origin":"*",
				    'content-type': 'application/json'
				},
				mode: 'cors'
			})
		}
		return (
        <div>
			<ActivityIndicator
				toast
				text="加载中..."
				animating={this.state.isShow}
			/>
			<div className='Mymsgsetnamesig-top'>
				<span className='my-return' onClick={() => this.props.history.push('/Mymsg')}>&lt;</span>
				<span className='my-setnamesig-top'>我的文章</span>
			</div>
        	<div><ul>{
        		this.state.res.map((item, idx) => {
					var userid = `${item.userid}`;
        			return <NavLink key={idx} to={{pathname:'/Detail/:' + item.articleid, state: {item:item}}}>
						<li className='wen-show' key={idx}>
        					<div className=' my-wen-box'>
								<img src={item.pic} className='my-wen-pic'/>
        						<br /><span>{item.title}</span><br /><br />
        						<span>{item.deliverdate}</span>
								<span>喜欢{item.thumb}</span>
								<button className='btn-shan-wen' onClick={(e) => {
									e.stopPropagation();
									e.nativeEvent.stopImmediatePropagation();
									e.preventDefault();
									
									let arr = this.state.res;
									for(let i = 0; i < arr.length; i ++){
										if(arr[i].articleid == item.articleid){
											arr.splice(i, 1);
											break;
										}
									}
									this.setState({
										res: arr
									})
									han(item.articleid);
									
									
									//window.location.reload(true)
								}}>删除</button>
        					</div>
        				</li>
					</NavLink>
        		})
        	}</ul></div>
			
			
        	<div id="container"></div>
			<div style={{height:'500px'}}></div>
        </div>
    );
  }
}
export default Mymywen